<template>
	<div class="container basicsBox">
		<div class="header">
      <div>
        <div class="blue"></div>
        <div class="left">研报</div>
      </div>
      <div>
        <span class="right">查看更多</span>
        <img src="@/assets/home/a-Frame216.png" />
      </div>
			
		</div>
		<div class="list">
			<div v-for="(item, index) in reportList" :key="index">
				<div>
					<p class="title" :title="item.title">
						{{ item.title }}
					</p>
					<p class="tag">
						<el-button
							v-if="item.categoryName"
							type="primary"
							plain
							size="small"
							>{{ item.categoryName }}</el-button
						>
					</p>
					<div class="footer">
            <div class="box">
              <img src="@/assets/home/a-Frame184.png">
						  <span class="time">{{ item.finishTime }}</span>
            </div>
						<!-- <div class="box box1">
							<img src="@/assets/home/a-Frame266.png" /><span>{{
								item.author
							}}</span>
						</div> -->
						<div class="box box2">
              <span>{{
								item.author
							}}</span>
						</div>
					</div>
				</div>
				<img :src="item.templatePath" class="image" />
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { getReportList } from '@/api/home'
import { onMounted, ref } from 'vue'

const reportList = ref([
  {
    title: '美国2月制造业活动增长几近停滞,商品期权再拾增长动能，寻找不确定中的期权商品期权再拾增长动能，寻找不确定中的期权',
    categoryName:'产业研究',
    finishTime: '2025-03-04',
    author: '安紫薇,金晓,欧阳瑞琳',
    templatePath: 'http://192.168.50.130:8082/stage-api/profile/template/研报/综合晨报/综合晨报_20240104163934A013.jpeg'
  },
  {
    title: '美国2月制造业活动增长几近停滞',
    categoryName:'产业研究',
    finishTime: '2025-03-04',
    author: '安紫薇,金晓,欧阳瑞琳',
    templatePath: 'http://192.168.50.130:8082/stage-api/profile/template/研报/综合晨报/综合晨报_20240104163934A013.jpeg'
  },
  {
    title: '美国2月制造业活动增长几近停滞',
    categoryName:'产业研究',
    finishTime: '2025-03-04',
    author: '安紫薇,金晓,欧阳瑞琳',
    templatePath: 'http://192.168.50.130:8082/stage-api/profile/template/研报/综合晨报/综合晨报_20240104163934A013.jpeg'
  },
  {
    title: '美国2月制造业活动增长几近停滞',
    categoryName:'产业研究',
    finishTime: '2025-03-04',
    author: '安紫薇,金晓,欧阳瑞琳',
    templatePath: 'http://192.168.50.130:8082/stage-api/profile/template/研报/综合晨报/综合晨报_20240104163934A013.jpeg'
  },
])

async function setReportList() {
	let { data } = await getReportList()
	reportList.value = data.obj
}

onMounted(() => {
	// setReportList()
})
</script>
<style scoped lang="less">
.container {
	background: linear-gradient(180deg, #f7f5ff 0%, #fafafb 100%);

	font-size: 16px;
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
  >div {
    display: flex;
    align-items: center;
    gap: 10px;
    .blue {
      width: 4px;
      height: 20px;
      background: #1356FF;
    }
    .left {
      font-weight: 600;
      font-size: 25px;
    }
    .right {

    font-size: 16px;
    color: @color-636976;
    margin-right: 5px;
    }
  }
}
.list {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
	gap: 20px;
	> div {
		background-color: #fafafb;
		border-radius: 12px;
		display: flex;
		padding: 24px;
		.image {
			// width: 238px;
			border-radius: 11px;
		}
		> div {
			flex: 1;
			padding: 8px 14px;
			display: flex;
			flex-direction: column;
			.title {
				font-size: 16px;
				color: @color-0F142C;
				font-weight: 500;
				margin-bottom: 5px;

        display: -webkit-box;
        -webkit-line-clamp: 2;    /* 限制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
			}
			.tag {
				margin-bottom: 15px;
				flex: 1;
			}
			.footer {
				display: flex;
				align-items: center;
				height: 25px;
				font-size: 12px;
				color: #b4b7c2;
				padding-right: 20px;
				// gap: 3.125rem;
				justify-content: space-between;
				.time {
					// margin-right: 10.5rem;
				}
				.box {
					display: flex;
					align-items: center;
					gap: 5px;
					cursor: pointer;
				}
			}
		}
	}
}
</style>
